<!-- -----------------------------------------------------------------
-
- Copyright (C) 2019 OSGeo
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
---------------------------------------------------------------------- -->

{% for menu, menu_items in menus.items %}

    {% if menu_items|length > 0 %}

        <li>

            <a href="#" class="dropdown-toggle" data-toggle="dropdown"
               role="button" aria-haspopup="true">
                {{ menu.title }}
                {% if menu_items|length > 0 %}
                    <i class="fa fa-angle-down fa-lg"></i>
                {% endif %}
            </a>
            <ul class="dropdown-menu">
                {% for menu_item in menu_items %}
                    <li>
                        <a href="{{ menu_item.url }}"
                           {% if menu_item.blank_target %}target="_blank"{% endif %}>
                            {{ menu_item.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

        </li>

    {% endif %}

{% endfor %}
{% block content_reposition_script %}
<script type="text/javascript">
    window.addEventListener('load', function(){
        var reposition = function() {
            if (document.querySelector) {
                // we should target the wrapper of navbar
                // to ensure all parts are computed in the height
                const fixedNavarNode = document.querySelector('nav.navbar-fixed-top');
                const wrapNode = document.querySelector('#wrap');
                const msContainerNode = document.querySelector('#ms-container');
                const fixedNavarNodeHeight = fixedNavarNode && fixedNavarNode.clientHeight;
                if (fixedNavarNodeHeight) {
                    if (wrapNode) {
                        wrapNode.style.marginTop = fixedNavarNodeHeight + 'px';
                        document.body.style.paddingTop = 0;
                    }
                    if (msContainerNode) {
                        msContainerNode.style.top = fixedNavarNodeHeight + 'px';
                        document.body.style.paddingTop = 0;
                    }
                }
            }
        };
        if (ResizeObserver) {
            const fixedNavarNode = document.querySelector('nav.navbar-fixed-top');
            const resizeObserver = new ResizeObserver(reposition);
            resizeObserver.observe(fixedNavarNode);
        } else {
            // attach the function to the window resize event
            window.addEventListener('resize', reposition);
        }

        reposition();
    });
</script>
{% endblock %}
